<template>
    <div class="company-user-list">
        <ul class="global-operation-list">
            <li class="global-operation-left">
                <ul class="global-filter-list">
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">状态：</h2>
                        <el-select v-model="searchForm.status" clearable filterable>
                            <el-option v-for="(item, index) in statusList" :key="index" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search" @click="rePosts">搜索</el-button>
                    </li>
                    <li class="global-filter-item">
                        <el-button class="global-filter-item-search" @click="restart">重置</el-button>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="success" class="global-filter-item-search"
                            v-if="operationList.includes('add') " @click="addMsg">新增</el-button>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="global-table-content">
            <div class="global-table-content-a">
                <el-table :data="dataList" style="width: 100%" :row-style="{ height: '0' }"
                    :cell-style="{ padding: '3px' }" max-height="620" border v-loading="tableLoading">
                    <el-table-column prop="id" label="编号" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="brandPlacement" label="投放品牌" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="brandPlacementTypeName" label="投放品牌类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="stationType" label="资源类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="mediumType" label="媒体类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="city" label="城市" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="orderTime" label="预计上刊时间" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" :formatter="(row) => formatterStatus(row) "
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200px">
                        <template slot-scope="scope">
                            <div>
                                <el-button v-if="operationList.includes('update')" style="font-size: 14px;" type="text"
                                    @click="handleUpdate(scope.row)">修改</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="global-page">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="pageSizes" :page-size="pageSize" :current-page="pageNum" background
                        layout="sizes, total, prev, pager, next" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>

        <!-- 新增编辑 -->
        <el-dialog :title="formTitle" :visible.sync="addMsgDialogVisible" width="50%" :before-close="addMsgHandleClose">
            <div>
                <el-form :model="addMsgForm" :rules="addMsgRules" ref="addMsgForm">
                    <el-form-item label="投放品牌" prop="brandPlacement" :label-width="formLabelWidth">
                        <el-input v-model="addMsgForm.brandPlacement" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="投放品牌类型" prop="brandPlacementType" :label-width="formLabelWidth">
                        <el-select v-model="addMsgForm.brandPlacementType" clearable filterable multiple>
                            <el-option v-for="(item, index) in brandPlacementTypeList" :key="index"
                                :label="item.sysValueName" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资源类型" prop="stationTypes" :label-width="formLabelWidth">
                        <el-checkbox-group v-model="addMsgForm.stationTypes">
                            <el-checkbox v-for="item in stationTypeList" :key="item.value"
                                :label="item.label"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="媒体类型" prop="mediumType" :label-width="formLabelWidth">
                        <el-input v-model="addMsgForm.mediumType" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="城市" prop="city" :label-width="formLabelWidth">
                        <el-input v-model="addMsgForm.city" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="预计上刊时间" prop="orderTime" :label-width="formLabelWidth">
                        <el-input v-model="addMsgForm.orderTime" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
                        <el-input v-model="addMsgForm.remark" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addMsgDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMsgSubmit">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import APIMediaRequirements from "@/api/apiMediaRequirements";
import APISysLabel from "@/api/apiSysLabel";
export default {
    name: "MediaRequirementsList",
    components: {},
    props: {
        operationList: Array,
        isShow: Boolean,
    },
    data() {
        return {
            // 表格相关
            tableLoading: true,
            dataList: [],
            pageSize: 15,
            pageNum: 1,
            total: 0,
            pageSizes: [10, , 15, 20, 50],
            tokenData: {
                token: "",
            },
            searchForm: {
                mediumName: null,
                status: null,
            },
            userInfo: {},
            projectId: null,
            statusList: [
                {
                    label: "可用",
                    value: 1,
                },
                {
                    label: "已失效",
                    value: 2,
                },
            ],
            formLabelWidth: "120px",
            formTitle: "新增",
            addMsgDialogVisible: false,
            addMsgForm: {
                id: null,
                projectId: null,
                brandPlacement: '',
                brandPlacementType: [],
                stationTypes: [],
                mediumType: '',
                city: '',
                orderTime: '',
                remark: '',
            },
            addMsgRules: {
                brandPlacement: { required: true, message: '请输入媒体类型名称', trigger: 'blur' },
                brandPlacementType: { required: true, message: '请选择投放品牌类型', trigger: 'change' },
                stationTypes: { required: true, message: '请选择资源类型', trigger: 'change' },
                mediumType: { required: true, message: '请输入媒体类型', trigger: 'blur' },
                city: { required: true, message: '请输入城市', trigger: 'blur' },
                orderTime: { required: true, message: '请输入预计上刊时间', trigger: 'blur' },
            },
            brandPlacementTypeList: [],
            stationTypeList: [
                {
                    label: "自营",
                    value: "自营",
                },
                {
                    label: "外采",
                    value: "外采",
                },
            ],
        };
    },
    activated() {
        let item = JSON.parse(localStorage.getItem("viewProject"))
        this.projectId = item.projectId
        this.tokenData.token = this.$store.state.token;
        this.userInfo = JSON.parse(localStorage.getItem("mujinguserInfo"))
        this.searchForm = {
            mediumName: null,
            status: null,
        }
        this.getSysLabelList()
        this.getPost()
    },
    methods: {
        formatterStatus(row){
            return row.status == 1 ? '可用' : row.status == 2 ? '已废弃' : '未知'
        },
        handleUpdate(row) {
            var brandPlacementTypeList = []
            if (row.brandPlacementType){
                row.brandPlacementType.split(",").forEach(item => {
                    brandPlacementTypeList.push(parseInt(item))
                })
            }
            this.addMsgForm = {
                id: row.id,
                projectId: row.projectId,
                brandPlacement: row.brandPlacement,
                brandPlacementType: brandPlacementTypeList,
                stationTypes: row.stationType.split(","),
                mediumType: row.mediumType,
                city: row.city,
                orderTime: row.orderTime,
                remark: row.remark,
            }
            this.addMsgDialogVisible = true
        },
        addMsgSubmit(){
            this.$refs["addMsgForm"].validate((valid) => {
                if (valid) {
                    const params = this.addMsgForm
                    params.projectId = this.projectId
                    if (params.stationTypes && params.stationTypes.length > 0){
                        params.stationType = params.stationTypes.join(",")
                    } 
                    if (params.brandPlacementType && params.brandPlacementType.length > 0) {
                        params.brandPlacementType = params.brandPlacementType.join(",")
                    }
                    params.token = this.$store.state.token
                    if (this.addMsgForm.id) {
                        params.id = this.addMsgForm.id
                        APIMediaRequirements.updateProjectMediaRequirements(params).then((res) => {
                            if (res.key === 1000) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.getPost()
                                this.addMsgDialogVisible = false
                            }
                        });
                    } else {
                        APIMediaRequirements.addProjectMediaRequirements(params).then((res) => {
                            if (res.key === 1000) {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.getPost()
                                this.addMsgDialogVisible = false
                            }
                        });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        addMsg(){
            this.addMsgForm = {
                id: null,
                projectId: null,
                brandPlacement: '',
                brandPlacementType: [],
                stationTypes: [],
                mediumType: '',
                city: '',
                orderTime: '',
                remark: '',
            }
            this.addMsgDialogVisible = true
        },
        addMsgHandleClose(){
            this.addMsgDialogVisible = false
        },
        formatterTime(time) {
            return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
        formatterDate(time) {
            return this.$moment(time).format("YYYY-MM-DD");
        },
        // 重置
        restart() {
            // 搜索条件重置
            this.searchForm = {
                mediumName: null,
                status: null,
            };
            this.rePosts();
        },
        // 分页pageSize改变
        handleSizeChange(e) {
            this.pageSize = e;
            this.rePosts();
        },
        // 分页pageNum改变
        handleCurrentChange(e) {
            this.pageNum = e;
            this.getPost();
        },
        // 重新请求
        rePosts() {
            this.pageNum = 1;
            this.dataList = [];
            this.getPost();
        },
        // 表格列表
        getPost() {
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                projectId: this.projectId,
            };
            if (this.searchForm.mediumName) {
                params.mediumName = this.searchForm.mediumName
            }
            if (this.searchForm.status) {
                params.status = this.searchForm.status
            }
            APIMediaRequirements.getProjectMediaRequirementsList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.total = res.count;
                    res.list.forEach(item => {
                        if (item.createTime) {
                            item.createDate = this.formatterTime(item.createTime)
                        }
                        if (item.status) {
                            item.statusValue = item.status == 1 ? '可用' :
                                item.status == 2 ? "已失效" : "未知"
                        }
                    })
                    this.dataList = res.list;
                    this.tableLoading = false;
                }
            });
        },
        getSysLabelList(){
            const params = {
                token: this.$store.state.token,
                sysLabelIds: "2",
            };
            APISysLabel.getSysLabelValueManageList(params).then((res) => {
                if (res.key === 1000) {
                    this.brandPlacementTypeList = res.result.data[2]
                }
            });
        },

    },
};
</script>

<style lang="sass">
</style>
<style lang="sass" scoped>

.global-operation-list
  padding-left: 0
.global-select .global-select-btn
  background: #FFFFFF
.global-table-content
  padding: 0
  background-color: white
  width: 100%
.global-table-content-a
  margin: 0 auto
  width: 90%
  padding: 20px 0
.company-user-list
  .global-operation-left
    margin-right: 0
</style>
